<template>
  <div class="captain">
    <div class="data_list">
      <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
        <el-table-column align="left" prop="id" :label="$t('common.serialNumber')"><!--序号--></el-table-column>
        <el-table-column align="left" prop="userName" :label="$t('common.accountName')"><!--账号名称--></el-table-column>
        <el-table-column align="left" prop="remainOrderCount" :label="$t('authority.remainingOrder')"><!--剩余单量--></el-table-column>
        <el-table-column align="left" :label="$t('common.operation')"><!--操作-->
          <template slot-scope="scope">
            <el-button @click="showDialog(scope.row)" type="text">{{$t('authority.allotRole')}}</el-button>
          </template>
        </el-table-column>
      </el-table><!--end table-->
    </div>

    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

    <!--分配角色start-->
    <alert-dialog title="分配角色" :visible.sync="setRoleTypeDialog" width="416px" :title="$t('authority.allotRole')">
      <el-form ref="form" :model="form" label-position="top" :rules="rules">
        <el-form-item label="账号名称" :label="$t('common.accountName')">
          <el-input :disabled="true" v-model="form.userName" type="text" placeholder="账号名称" :placeholder="$t('common.accountName')"></el-input>
        </el-form-item>
        <!--角色-->
        <el-form-item label="分配角色" :label="$t('authority.allotRole')"  prop="roleId">
          <el-select v-model="form.roleId" style="width: 100%;" @change="roleTypeChange">
            <el-option v-for="item in customTypeList" :key="item.roleId" :value="item.roleId" :label="$root.local=='zhCN' ? item.roleName : item.idName" v-if="item.roleId !== 0"></el-option>
          </el-select>
        </el-form-item>
        <!--待分配分配角色时显示其主管-->
        <el-form-item v-if="form.roleId === 1" label="组别列表" :label="$t('authority.groupList')" prop="groupId">
          <el-select v-model="form.groupId" placeholder="请选择组别" style="width: 100%;" :placeholder="$t('authority.chooseGroup')">
            <el-option v-for="item in captainList" :key="item.userId" :value="item.userId" :label="item.userName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel" type="default">{{$t('common.cancel')}}</el-button>
        <el-button @click="setRoleType" type="primary">{{$t('common.submit')}}</el-button>
      </div>
    </alert-dialog><!--分配角色end-->
  </div>
</template>

<script>
  import Pagination from '@/components/pagination';
  import mixin from '@/service/mixin';
  import AlertDialog from '@/components/alert-dialog';

  export default {
    name: 'waitingList',
    props: {
      activeTab: {
        type: String,
        required: true
      },
      searchForm: {
        type: Object,
        required: true
      },
      customTypeList: {
        type: Array,
        required: true
      }
    },
    components: {
      Pagination,
      AlertDialog
    },
    mixins: [mixin],
    data() {
      return {
        thisRoleType: 0,
        isListening: false,
        userId: '',
        form: {
          userId: '',
          userName: '',
          groupId: '',
          roleId: ''
        },
        setRoleTypeDialog: false,
        captainList: [],
        rules: {
          roleId: [
            { required: true, message: this.$t('authority.plsChooseRole'), trigger: 'change' }
          ],
          groupId: [
            { required: true, message: this.$t('authority.chooseGroup'), trigger: 'change' }
          ],
        },
      };
    },
    watch: {
      activeTab(val) {
        if ('waitingList' === val) {
          this.page.currentPage = 1;
          this.getTableData();
          this.getCaptainList();
        }
      },
      'searchForm.search'(val) {
        if (val && this.activeTab === 'waitingList') {
          this.page.currentPage = 1;
          this.getTableData();
        }
      }
    },
    methods: {
      getTableData(page = this.page) {
        const params = {
          roleId: this.thisRoleType,
          userName: this.searchForm.userName,
          leaderId: '',
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          }
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.tableData = data.data;
            this.page.recordsTotal = data.pageCount;
            if (this.searchForm.search) {
              this.$emit('search', this.searchForm);
            }
            this.tableMaxHeight = window.document.body.clientHeight - 265;
          }
        });
      },
      showDialog(row) {
        this.setRoleTypeDialog = true;
        this.form.userId = row.userId;
        this.form.userName = row.userName;
        // this.groupId = row.leaderId;
      },
      setRoleType() {
        const params = {
          userId: this.form.userId,
          roleId: this.form.roleId,
          leaderId: this.form.groupId
        };
        // debugger
        if (this.form.roleId === 1 && this.form.groupId === '') {
          this.$message.error(this.$t('csDetails.chooseGroup'));
        } else if (this.form.roleId === '') {
          this.$message.error(this.$t('authority.plsChooseRole'));
        } else {
          this.$api.tel.updateUserRole(params).then((res) => {
            const { status, error } = res;
            if ('1' === status && '00000000' === error) {
              this.setRoleTypeDialog = false;
              this.$message.success(this.$t('authority.settingSucc'));
              this.getTableData();
              this.form.roleId = '';
              this.form.groupId = '';
            }
          });
        }
      },
      getCaptainList() {
        const params = {
          roleId: 2,
          name: '',
          leaderId: ''
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error && data.data) {
            this.captainList = data.data;
          }
        });
      },
      roleTypeChange(val) {
        if (val !== 1) {
          this.form.groupId = '';
        }
      },
      cancel() {
        this.setRoleTypeDialog = false;
        this.form.roleId = '';
        this.form.groupId = '';
      }
    },
    created() {
      if (this.activeTab === 'waitingList') {
        this.getTableData();
        this.getCaptainList();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .data_list{
    background-color: #fff;
    padding: 10px 16px;
  }
</style>
